<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getContextPath();
	String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+basePath+"/";
	request.setAttribute("path",path);
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>个人资料</title>
	<script type="text/javascript" src="${path}/school/js/jquery.js"></script>
	<script type="text/javascript" src="${path}/js/jquery-2.1.1.min.js"></script>
	<link href="${path}/school/css/style.css" rel="stylesheet" media="all">
	<link rel="shortcut icon" href="${path}/school/img/favicon.png">
	<SCRIPT LANGUAGE="JavaScript">  
    function setImagePreview(docObj,imgObjPreview)     
    {    
          
        var name=docObj.value;  
          
        if(docObj.files && docObj.files[0])    
        {    
  
            //alert("hello"+docObj.files[0]);  
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式      
            //document.getElementById("imgDiv").style.display="block";  
            document.getElementById("img").src= window.URL.createObjectURL(docObj.files[0]);    
        }    
        else    
        {    
            //IE下，使用滤镜    
            docObj.select();    
            var imgSrc = document.selection.createRange().text;    
                
            //必须设置初始大小    
            localImagId.style.width = "300px";    
            localImagId.style.height = "200px";    
                
            //图片异常的捕捉，防止用户修改后缀来伪造图片    
            try    
            {    
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";    
                //localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;    
             }    
             catch(e)    
             {    
                alert("您上传的图片格式不正确，请重新选择!");    
                return false;    
             }                              
             imgObjPreview.style.display = 'none';    
             document.selection.empty();    
       }    
       return true;    
   }    
</script>  
</head>
<body>
	<header class="top_header">
		<h1><a href="javascript:history.go(-1);" class="go_back"></a><span class="black_text">个人资料</span></h1>
	</header><!-- header -->
	<div class="content_wrap kamodify_wrap">
		<form class="kamodify_form"id="form1"  enctype="multipart/form-data"method="post" action="${path}/updateUser">
	 
			<p class="kamodify_p kamodify_img">
				<span class="kamodify_txt">编辑头像</span>
				<label for="file0" class="kamodifyimg">
					<input type="file" name="myfiles" id="file0" multiple="multiple" onChange="setImagePreview(this,img);" />
					<c:choose>
						<c:when test="${user.userPicture != null}">
							<img src="${path}${user.userPicture}" id="img"></a>
						</c:when>
						<c:otherwise>
							<img src="${path}/school/img/user_img_01.jpg"></a>
						</c:otherwise>
					</c:choose>
					<i class="kamodify_imgedit"></i>
					<span class="clear"></span>
				</label>
				<span class="clear"></span>
			</p>
			<p class="kamodify_p">
				<span class="kamodify_txt">昵称</span>
				<input type="text" name="name" value="${user.name}">
				<span class="clear"></span>
			</p>
			<p class="kamodify_p">
				<span class="kamodify_txt">性别</span>
				<c:choose>
					<c:when test="${user.gender == '男'}">
						<label><input type="radio" checked>男</label>
						<label><input name="Sex" type="radio" value="女">女</label>
					</c:when>
					<c:when test="${user.gender == '女'}">
						<label><input name="Sex" type="radio" value="男">男</label>
						<label><input type="radio" checked>女</label>
					</c:when>
					<c:otherwise>
						<label><input name="Sex" type="radio" id="men" value="男">男</label>
						<label><input name="Sex" type="radio" id="woman" value="女">女</label>
					</c:otherwise>
				</c:choose>
				<span class="clear"></span>
			</p>
			<p class="kamodify_but"><button type="submit">确认修改</button></p>
		</form>
		<form id="form2" name="form2" method="post" action="${path}/outToLogin">
			<p class="kamodify_but kasign_out"><button type="submit">退出登录</button></p>
		</form>
	</div><!-- content_wrap -->

	<div class="footer_copyright">
		<p><span>苏州知行合一网络科技有限公司</span>提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->
<script>	
$("#file0").change(function(){
	var objUrl = getObjectURL(this.files[0]) ;
	console.log("objUrl = "+objUrl) ;
	if (objUrl) {
		$("#img0").attr("src", objUrl) ;
	}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
	var url = null ; 
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}
</script>
</body>
</html>